<%--
  Created by IntelliJ IDEA.
  User: DELL-
  Date: 2023/12/27
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" >
    <div class="content">
        <div class="login-content">
            <a href="" class="banner-box"></a>
            <div class="login-box">
                <h1>歌手比赛</h1>
                <input type="text" name="account" placeholder="账号">
                <input type="password"  name="password" placeholder="密码">
                <button class="login-btn layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
                <p id="errorMessage" style="color: red;"></p>
                <a class="login-a" href="registerInit">注册帐号</a>
            </div>
        </div>
    </div>
</form>
</body>

<script src="//unpkg.com/layui@2.9.1/dist/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo-login)', function(data){
            console.log('Submit event triggered');
            $.ajax({
                url: 'login', // 后端登录接口的 URL
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field), // 表单数据
                success: function(response){
                    if (response.message) {
                        // 登录失败，弹出错误提示
                        $("#errorMessage").text(response.message);
                        return false;
                    } else {
                        // 登录成功，根据后端返回的重定向路径执行跳转
                        window.location.href = response.redirect;
                    }
                },
                error: function () {
                    // 异常处理
                    $("#errorMessage").text('登录失败，请稍后重试');
                }
            });
            return false; // 阻止默认表单跳转
        });
    });
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100vw;
        height: 100vh;
        /* background-color: aqua; */
        background: url(../../../static/images/login.jpg) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-content {
        position: relative;
        width: 800px;
        height: 360px;
        background-color: rgba(255,219,95,0.7);
        border-radius: 30px;
        padding: 30px;
    }

    .banner-box {
        display: inline-block;
        width: 500px;
        height: 100%;
        /* background-color: rgb(0, 92, 92); */
        background: url(../../../static/images/login.jpg) no-repeat;
        background-size: cover;
        border-radius: 20px 0 0 20px;
    }

    .login-box {
        width: 330px;
        height: 100%;
        /* background-color: rgb(172, 106, 26); */
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 30px 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .login-box>h1 {
        font-size: 36px;
        margin: 60px 0;
        color: rgb(75,70,70);
    }

    .login-box>input {
        margin-bottom: 20px;
        width: 200px;
        height: 36px;
        padding: 0 20px;
        border-radius: 36px;
        border: none;
        outline: none;
        font-size: 18px;
    }

    .login-btn {
        margin-top: 20px;
        width: 200px;
        height: 40px;
        background-color: rgba(44,221,176,0.8);
        border: none;
        border-radius: 40px;
        color: #fff;
        font-size: 18px;
    }
    .login-a{
        margin-top: 20px;
    }

    @media screen and (max-width: 900px){
        .login-content {
            margin: 0 30px;
        }

        .banner-box {
            border-radius: 20px;
        }

        .login-box {
            background-color: rgba(44,221,176,0.5);
        }
    }

    @media screen and (max-width: 600px) {
        .content {
            background: url(../../../static/images/login.jpg) no-repeat center;
        }

        .login-content {
            background-color: transparent;
        }

        .banner-box {
            display: none;
        }

        .login-box {
            position: initial;
            margin: -40px auto;
            background-color: transparent;
        }
    }
</style>
</html>
